<template>
   <div>
     <h1>记单词计划</h1>
     单词：
     <input type="text" v-model="vocabulary.word">
     释义：
    <input type="text" v-model="vocabulary.meaning">
     例句：
    <input type="text" v-model="vocabulary.example">
    <button @click="add">新增</button>
 
     <h3 class="center">今日计划</h3>
     <p v-for = "(item,index) in vocabulary.list" :key="index">
       {{
         `${index+1} 单词： ${item.word} 释义： ${item.meaning}  例句： ${item.example}`
       }}
       <button @click="rem(index)">已会</button>
       <button @click="unknow(index)">不认识</button>
     </p>
     <h3 class="middle">重新记忆</h3>
     <h4 v-if="vocabulary.flag">暂无</h4>
     <p v-for="(item,index) in vocabulary.relist" :key="index">
        {{
         `${index+1} 单词： ${item.word} 释义： ${item.meaning}  例句： ${item.example}`
       }}
       <!-- <button @click="rem(index)">已会</button>
       <button @click="unknow(index)">不认识</button>  -->
     </p>
      <h3 class="middle">今日新增</h3>
     <p v-for="(item,index) in vocabulary.newlist" :key="index">
        {{
         `${index+1} 单词： ${item.word} 释义： ${item.meaning}  例句： ${item.example}`
       }}
     </p>
  </div>
</template>

<script setup>
import { reactive } from "vue";
   const vocabulary = reactive({
     flag: true,
     list:[
       {
         word:"apple",
         meaning:"苹果",
         example:"I love apple"
       },
       {
         word:"pear",
         meaning:"梨",
         example:"I love pear"
       }
     ],
     relist:[ ],
     newlist:[ ],
   });

   function rem(index) {
     vocabulary.list.splice(index,1);
   }
   function unknow(index){
     if(vocabulary.relist !==[]){
         vocabulary.flag = false;
     }
     vocabulary.relist.push(vocabulary.list[index]);
     vocabulary.list.splice(index,1);
   }
   function add(){
     vocabulary.newlist.push({
       word: vocabulary.word,
       meaning: vocabulary.meaning,
       example: vocabulary.example
     });
   }

</script>

<style>
.main {
  width: 700px;
  border: 3px solid green;
  margin: 0 auto;
}
.func {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
</style>
